<!DOCTYPE html>
<html><!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Bootstrap Template</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
    <style>
        /*头部导航栏*/
        header {
            border: 1px solid red;
            width: 100%;
            height: 90px;
        }

        /*form表单*/
        .banner-form {
            width: 500px;
            position: absolute;
            left: 60%;
            top: 15%
        }

        .banner-form h1 {
            font-size: 56px;
            line-height: 1.5;
            color: #1C2B3D;
            display: block;
        }

        /*包上牌 提新车 样式*/
        .advantage-wrap{
            width: 100%;
            height:308px;
        }
        .advantage-wrap .clearfix li {

            width: 28%;
            float: left;
            text-align: center;
            list-style: none;
            margin-top: 48px;
            margin-left: 28px;
            margin-right: 25px;
            border-radius: 5px;
            padding: 30px;
        }
        .advantage-wrap .clearfix li img{
            width: 66px;
            height:66px;
        }
        .advantage-wrap ul{
            width: 1250px;
            height: 100%;
            margin: 0 auto;
        }

        /*爆款车型任你选择*/
        .row{
            background-color:#dddddd ;
        }
        #h1{
            margin-bottom: 60px;
        }
        h1 {
            width: 1250px;
            font-size: 56px;
            text-align: center;
            font-weight: bold;
            margin: 60px auto;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .vehicle-list{
            width: 1250px;
            margin: 0 auto;


        }
        .vehicle-list ul{
            width: 100%;
            height: 722px;
        }
        .vehicle-list .vehicle-item{
            width: 31%;
            background-color: #fff;
            margin-right: 20px;
            margin-bottom: 20px;
            float: left;
            border-radius: 5px;
            overflow: hidden;
        }
        .vehicle-list .vehicle-item img{
            width: 402px;
            height: 209px;
        }
        .vehicle-list .vehicle-item .vehicle-item-content{
            padding: 20px;
            margin: 10px 0;
        }
        .vehicle-list .vehicle-item .vehicle-item-content h2{
            font-size: 16px;
            color: #001024;
        }
        .vehicle-list .vehicle-item .vehicle-item-content ol li{
            display: inline-block;
            margin: 5px 20px 10px 0;
        }
        .vehicle-list .vehicle-item .vehicle-item-content {
            color: #999;
            margin: 5px 0 30px;
        }
        .vehicle-list .vehicle-item .vehicle-item-content a{
            display: block;
            width: 100%;
            margin-top:10px;
            background-color: #f16622;
            padding: 2px;
            text-align: center;
            color: #fff;
            border-radius: 3px;
            font-size: 14px;
        }
        /*为什么要在货拉拉买车*/
        .buy-slogan h1{
            position: relative;
            z-index: 0;
        }
        .buy-slogan>h1{
            width: 1250px;
            font-size: 56px;
            text-align: center;
            font-weight: bold;
            color: #1C2B3D;
            margin: 60px auto;
        }
        .buy-slogan .bk{
            background-image: url("https://lalamc.huolala.cn/images/world_map@2x.png");
            position: absolute;
            width: 623px;
            height: 400px;
            right: 300px;

            background-size: 100% 100%;
            z-index: -1;
           ;
        }
        /*4s店买车*/
        .buy-slogan .buy-slogan-content div{
            padding-bottom: 30px;
            border-bottom: 1px solid #DCDEE2;
            margin: 80px 0 47px;
        }
        .buy-slogan .buy-slogan-content .clerfix{
            padding-bottom: 30px;
            border-bottom: 1px solid #DCDEE2;
            margin: 80px 0 47px;
            margin-left: 500px;
        }
        .buy-slogan .clerfix span{
            font-weight: bold;
            font-size: 30px;
            display: block;
            width: 335px;
            height: 42px;
            line-height: 42px;
            float: left;
            color: #001024;
        }
        .buy-slogan .buy-slogan-content{
            width: 980px;
            margin: 0 auto;
            z-index: 2;
            position: relative;
        }
    </style>
</head>
<body>
<header>
    <div>
        头部
    </div>
</header>
<section>
    <!--轮播图-->
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/banner.png" alt="First slide">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="img/banner.png" alt="Second slide">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="img/banner.png" alt="Third slide">
                <div class="carousel-caption"></div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <!--用户申请 领取礼包-->
        <div class="banner-form">
            <h1>货拉拉购车专享</h1>
            <h1>超低首付</h1>
            <div class="banner_input">
                <form action="">
                    <input type="text" placeholder="请输入你的号码">
                    <button type="submit">
                        <i class="fa fa-shower"></i>
                    </button>
                    <button onclick="showLogin()">送豪礼</button>
                </form>

                <!--fofm表单填写资料-->
                <form id="dialog" style="display: none">
                    <p>
                        <input type="text" placeholder="请问怎么称呼您(可选)">
                    </p>
                    <p>
                        <input type="number" placeholder="请输入手机号码">
                        <span style="color: rgb(241, 102, 34); cursor: pointer;">获取验证码</span>
                    </p>
                    <p>
                        <input type="text" maxlength="6" placeholder="请输入验证码">
                        <a href="javascript:;" style="background-color: rgb(241, 102, 34); cursor: pointer;">立即预约</a>
                    </p>
                </form>
            </div>
        </div>
    </div>
    <!--包上牌 提车快 送会员-->
    <div class="advantage-wrap " >
        <ul class="clearfix">
            <li>
                <div class="i1">
                    <img src="https://lalamc.huolala.cn/images/Rectangle@2x.png">

                </div>
                <h3>包上牌</h3>
                <p>轻松上牌,快速上路,提车赚钱</p>
            </li>
            <li>
                <div class="i2">
                    <img src="https://lalamc.huolala.cn/images/Rectangle2@2x.png">

                </div>
                <h3>提车快</h3>
                <p>大量现车不用等,一天就可开新车</p>
            </li>
            <li>
                <div class="i3">
                    <img src="https://lalamc.huolala.cn/images/ic_vipgift@2x.png">
                </div>
                <h3>送会员</h3>
                <p>买车就送超级会员,抢单无上限</p>
            </li>
        </ul>
    </div>

    <!--灰色背景 爆款选车-->
    <div class="row">
        <div id="h1">
            <h1>爆款车型任你选</h1>
        </div>
        <!--车辆选择-->
        <div class="vehicle-list">
            <ul>
                <li class="vehicle-item">
                    <img src="https://lalamc.huolala.cn/images/car1.png">
                    <div class="vehicle-item-content">
                        <h2>长安神骐T20平板(平板)</h2>
                        <a href="javascript:;">马上预约，领取购车礼包</a>
                    </div>
                </li>
                <li class="vehicle-item">
                    <img src="https://lalamc.huolala.cn/images/car2.png">
                    <div class="vehicle-item-content">
                        <h2>长安睿行M80两座（中面）</h2>
                        <a href="javascript:;">马上预约，领取购车礼包</a>
                    </div>
                </li>
                <li class="vehicle-item">
                    <img src="https://lalamc.huolala.cn/images/car3.png">
                    <div class="vehicle-item-content">
                        <h2>五菱荣光V（小面）</h2>
                        <a href="javascript:;">马上预约，领取购车礼包</a>
                    </div>
                </li>
                <li class="vehicle-item">
                    <img src="https://lalamc.huolala.cn/images/car4.png">
                    <div class="vehicle-item-content">
                        <h2>上汽依维柯V35（大面）</h2>
                        <a href="javascript:;">马上预约，领取购车礼包</a>
                    </div>
                </li>
                <li class="vehicle-item">
                    <img src="https://lalamc.huolala.cn/images/car5.png">
                    <div class="vehicle-item-content">
                        <h2>长安睿行M80四座（中面）</h2>
                        <a href="javascript:;">马上预约，领取购车礼包</a>
                    </div>
                </li>
                <li class="vehicle-item">
                    <img src="https://lalamc.huolala.cn/images/car6.png">
                    <div class="vehicle-item-content">
                        <h2>开瑞优优新能源车（中面）</h2>
                        <a href="javascript:;">马上预约，领取购车礼包</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--为什么要在货拉拉买车-->
    <div class="buy-slogan">
        <h1>为什么要在货拉拉买车</h1>
        <div class="bk"></div>

        <div class="buy-slogan-content">
            <div class="clerfix">
                <span></span>
                <span>4S店买车</span>
                <span>货拉拉买车</span>
            </div>
            <u1>
                <li>
                    <span>首付（元）</span>
                    <span>月供（元）</span>
                    <span>礼品</span>
                    <span>收入</span>
                    <span>运营资质</span>
                </li>
                <li>
                    <span>1.2万</span>
                    <span>2200+</span>
                    <span>小礼品</span>
                    <span>路边趴活，收入不定</span>
                    <span>无挂靠资质，或需付费挂靠</span>
                </li>
                <li>
                    <span style="color: rgb(241, 102, 34);">0元起</span>
                    <span style="color: rgb(241, 102, 34);">1900+</span>
                    <span>最高价值<em style="color: rgb(241, 102, 34);">2100元</em>超级会员超值到店大礼包</span>
                    <span>货拉拉<em style="color: rgb(241, 102, 34);">海量订单</em>，手机一键接单赚钱</span>
                    <span><em style="color: rgb(241, 102, 34);">合法有资质</em>，拉货不怕查</span>
                </li>
            </u1>
        </div>
    </div>

</section>
<footer></footer>
<script>
    //5.弹出框
    function showLogin() {
        layer.open({
            area:['500px','300px'],
            type:1,
            content:$('#dialog')
        })
    }
</script>
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>

</html>